<template>
  <div class='list'>
    <ul>
      <li v-for="(item,index) in listData" :key="index">
        <p class="item1">
          <img :src="icon1" alt="">
          <span class="name">{{item.name}}</span>
          <span class="number">{{item.number}}</span>
        </p>
        <p class="item2">
          <img :src="icon2" alt="">
          <span class="phone">电话：<a :href="'tel:'+(item.phone)">{{item.phone||'暂无'}}</a></span>
        </p>
        <p class="item2">
          <img :src="icon3" alt="">
          <span class="phone">邮箱：<a :href="'mailto:'+item.email"></a>{{item.email||'暂无'}}</span>
          <span class="state">{{item.state||'暂无'}}</span>
        </p>
      </li>
    </ul>
    
    <p class="no-data" v-if="formatListData.length===0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData'],
  components: {},
  name: "",
  data() {
    return {
      icon1:require('../../../../assets/images/center/icon-teacher-green.png'),
      icon2:require('../../../../assets/images/center/icon-04-s.png'),
      icon3:require('../../../../assets/images/center/icon-at.png')
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  background-color: #efeff4;
  height: 100%;
  overflow: auto;
  ul{
    height: 100%;
  }
  li{
    padding: 20px 40px;
    margin: 20px 0;
    background-color: #fff;
  }
  .item1{
    display: flex;
    font-size: 16px;
    height: 60px;
    line-height: 60px;

    img{
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
    .number{
      margin-left: auto;
    }
  }
  .item2{
    color: #666;
    display: flex;
    height: 50px;
    line-height: 50px;

    img{
      width: 30px;
      height: 30px;
      margin-right: 10px;
      margin-top: 10px;
    }
    .state{
      margin-left: auto;
      font-size: 16px;
    }
  }
}
</style>